import { getRoleApi } from "@/api/role";
import { DeleteOutlined, EditOutlined, EyeOutlined, } from "@ant-design/icons";
import { ActionType, ModalForm, ProColumns,  ProTable, } from "@ant-design/pro-components";
import { useRequest } from "ahooks";
import { Button, Drawer, Dropdown, Form, Space, Tag, message, Image, Avatar } from "antd";
import { useEffect, useRef, useState } from "react";
import dayjs from 'dayjs'
import { baseURL } from "@/api/request";
import { DeleAdviseApi, GetAdviseApi } from "@/api/advise";
import { userStore } from "@/mobx/store";
import { history } from "umi";
import { options, zh } from "@/utils";


// 数据平扁化
const datas = zh(options)
console.log(datas);


const AdviseList = () => {
    type GithubIssueItem = addAdviseTypes

    const [roleList, setRoleList] = useState<roleTypes[]>([])
    const getRole = useRequest(getRoleApi, {
        onSuccess: (res) => {
            setRoleList(res.result)
        }
    })

    const [y, sety] = useState<getAnno>({} as getAnno)
    const [open, setOpen] = useState(false);
    const showDrawer = (data: getAnno) => {
        setOpen(true);
        sety(data)
    };
    const [id, setId] = useState('')
    const [imgs, setImgs] = useState('')
    const onClose = () => {
        setOpen(false);
    };
    const { Mydata: { userInfo } } = userStore()
    const [form] = Form.useForm<any>();
    const columns: ProColumns<GithubIssueItem>[] = [
        {
            dataIndex: 'avatar',
            title: '头像',
            search: false,
            render: (_, r) => (
                <Space>
                    <Avatar size={64} src={r.author?.avatar?.replace(/public/, baseURL)} />
                </Space>
            )
        },
        {
            title: '用户名',
            dataIndex: 'username',
            search: false,
            render: (_, record) => (
                <Space>
                    <Tag>{record.author?.username}</Tag>
                </Space>
            ),
        },
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '意见内容',
            dataIndex: 'content',
            search: false,
            render: (_, record) => (
                <Space>
                    <div dangerouslySetInnerHTML={{ __html: record.content }}></div>
                </Space>
            ),
        },
        {
            title: '时间',
            dataIndex: "time",
            search: false,
            render: (_, record) => (
                <Space>
                    {dayjs(record.time).format('YYYY-MM-DD HH:mm:ss')}
                </Space>
            )
        },
        {
            title: '意见类型',
            dataIndex: 'type',
            valueType: 'select',
            valueEnum: datas,
            // search:false,
        render: (_, r) => (
            <Space>
                {r.type.map(item => (<Tag color="#108ee9">{item}</Tag>))}
            </Space>
        )
        },
    {
        title: '操作',
        valueType: 'option',
        key: 'option',
        render: (text, record, _, action) => [
            <div>
                {record.author?.phone == userInfo.get('phone') && <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} style={{ marginRight: '10px' }} onClick={() => { DeleAdviseApi(record._id); actionRef.current?.reload() }} />}
                {record.author?.phone == userInfo.get('phone') && <Button type='primary' danger shape="circle" icon={<EditOutlined />} style={{ marginRight: '10px' }} onClick={() => { history.push('/admin/advise/update/' + record._id) }}></Button>}
                <Button type="primary" shape="circle" icon={<EyeOutlined />} onClick={() => { history.push('/admin/advise/detail/' + record._id) }} />
            </div>
        ],
        },
    ];
const actionRef = useRef<ActionType>();
return (
    <div>
        <ProTable<GithubIssueItem>
            columns={columns}
            actionRef={actionRef}
            cardBordered
            request={async (params = {}, sort, filter) => {
                let res = await GetAdviseApi({ ...params, keyword: params.title })
                return {
                    data: res.result as any
                }
            }}
            editable={{
                type: 'multiple',
            }}
            columnsState={{
                persistenceKey: 'pro-table-singe-demos',
                persistenceType: 'localStorage',
                onChange(value) {
                    console.log('value: ', value);
                },
            }}
            rowKey="id"
            search={{
                labelWidth: 'auto',
            }}
            options={{
                setting: {
                    listsHeight: 400,
                },
            }}
            form={{
                // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
                syncToUrl: (values, type) => {
                    if (type === 'get') {
                        return {
                            ...values,
                            created_at: [values.startTime, values.endTime],
                        };
                    }
                    return values;
                },
            }}
            pagination={{
                pageSize: 5,
                onChange: (page) => console.log(page),
            }}
            dateFormatter="string"
            headerTitle="用户创建"

        />
        <Drawer title={y?.title} placement="right" onClose={onClose} open={open}>
            <p>{y?.content}</p>
            <p><Tag color={roleList.find(item => item.value == y?.type)?.color}>{roleList.find(item => item.value == y?.type)?.label}</Tag></p>
            <p>发布人:{y?.author?.username}</p>
            <Image
                width={200}
                src={y?.desc?.replace(/public/, baseURL)}
            />
        </Drawer>

    </div>
);
}
export default AdviseList